import React,{useEffect,useState, useRef} from 'react';

import { PageContainer  } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Divider, message, Input, Drawer } from 'antd';
import {getList,addList,editList} from './service'
import CreateForm from './components/CreateForm'
import UpdateForm from './components/UpdateForm'

export default function BlogManagement() {
    const [flag,setFlag] = useState(false)
    const [updateFlag,setUpdateFlag] = useState(false)
    const [rowData,setRowData] = useState('')
  const actionRef = useRef();

    const columns = [
        {
            title: '博客标题',
            dataIndex: 'title',
            formItemProps: {
                rules: [
                  {
                    required: true,
                    message: '快特么输入标题',
                  },
                ],
              },
        },
        {
            title: '博客内容',
            dataIndex: 'content'
        },
        {
            title: '博客作者',
            dataIndex: 'author'
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            hideInForm: true,
        },
        {
            title:"操作",
            render:(dom, row) => {
                return <>
                    <Button onClick={() => {
                        setUpdateFlag(true) // 打开弹框
                        setRowData(row) // 回显数据
                    }}>编辑</Button>
                    <Button>删除</Button>
                </>
            }
        }
    ]
    return <PageContainer>
        <CreateForm modalVisible={flag} onCancel={() => {setFlag(false)}}>
            <ProTable
                onSubmit={async (value) => {
                    const success = await addList({
                        title:value.title,
                        content:value.content,
                        author:value.author,
                    });
                    if (success.code===1) {
                        setFlag(false); // 关闭弹框
                        if (actionRef.current) {
                            actionRef.current.reload(); // 重置数据
                        }
                    }
                }}
                headerTitle="查询表格"
                rowKey="key"
                columns={columns}
                type='form'
            />  
        </CreateForm>
        {rowData?<UpdateForm 
            flag={updateFlag} 
            onCancel={() => {
                setUpdateFlag(false)
                setRowData(null) // 销毁组件重新进入
            }} 
            values={rowData}
            onSubmit={async (value) => {
                // 调提交接口
               const data =  await editList(value)
               if (data.code===1) {
                    setUpdateFlag(false); // 关闭弹框
                    setRowData(null) // 销毁组件重新进入
                    if (actionRef.current) {
                        actionRef.current.reload(); // 重置数据
                    }
            }
            }}
            />
        :''}
        
        <ProTable
            headerTitle="查询表格"
            actionRef={actionRef}
            rowKey="key"
            search={{
             labelWidth: 120,
            }}
            toolBarRender={() => [
                <Button type="primary" onClick={() => {
                    setFlag(true)
                }}>
                    <PlusOutlined   /> 新建
                </Button>,
            ]}
            request={async (params, sorter, filter) => {
                // 要求必须是这个格式 否则无法渲染
                const data = await getList({
                    pageIndex:params.current,
                    pageSize:params.pageSize,
                    keyword:params.title
                })
                return {
                    data: data.data.map(item => {
                        return {...item,key:item.id}
                    }),
                    total: data.total,
                    success: true
                }
            }}
            columns={columns}
        />
    </PageContainer>
}
